<layout name="page" />
<block name="content">
	<style>
		a {
			color: #353535;
		}
		.todo_bg1 {
			background: #CCFF99;
		}
		.todo_bg2 {
			background: #99CCFF;
		}
		.todo_bg3 {
			background: #FFCCCC;
		}
		a:hover {
			color: #3D3D3D;
		}
		span a {
			text-align: center;
			cursor: pointer;
		}
		.down, .up {
			color: #2794eb;
		}
		.del {
			color: #ed5565;
		}
		#dialog2 {
			position: absolute;
			background: #fff;
			border: 1px solid #ccc;
			text-align: center;
			width: 90px;
			padding-top: 5px;
			padding-bottom: 5px;
			border-radius: 2px;
		}
		#dialog2 li a {
			cursor: pointer;
			width: 80px;
			line-height: 30px;
			height: 30px;
			margin-left: auto;
			margin-right: auto;
			display: block;
			border-radius: 2px;
		}
		#dialog2 li a:hover {
			background: #2794EB;
			color: #fff;
		}
		.btn-s {
			display: inline-block;
			border: 1px solid #ccc;
			line-height: 21px;
			padding-left: 4px;
			padding-right: 4px;
			background: #ffffff;
			border-raduis: 2px;
		}
	</style>
	{:widget('page_header/search',array('name'=>'待办事项'))}
	<div class="operate-panel">
		<i class="mid"></i>
		<a class="btn btn-normal" onclick="add()" >新建</a>
	</div>
	<form id="form_data" name="form_data" method='post' class="sub">
		<div>
			<div class="table border-bottom">
				<ul>
					<li class="thead">
						<span class="w20 x1"> 待办事项 </span>
						<span class="w10 text-center">优先级</span>
						<span class="w10 ">截至日期</span>
						<span class="w10  text-center">状态</span>
						<span class="w10 ">操作</span>
					</li>
					<foreach name="list" val="vo" >
						<li class="tbody todo_bg{$vo.priority}" node="{$vo.id}">
							<input class="node" type="hidden" name="node[]" value="{$vo.id}">
							<input class="priority" type="hidden" name="priority[]" value="{$vo.priority}">
							<input class="sort" type="hidden" name="sort[]">
							<span class="w20 x1"> <a href="{:url('edit','id='.$vo['id'])}">{$vo.name}</a> </span>
							<span class="w10 text-center">{:status($vo['priority'],'todo')}</span>
							<span class="w10 ">{$vo.end_date}</span>
							<span class="w10  text-center"> <a class="status">{:todo_status($vo['status'])}</a> </span>
							<span class="w10">
								<div class="w2 text-center" style="display:inline-block;">
									<a title="调高优先级" class="up" onclick="up(this)"><i class="fa fa-arrow-up"></i></a>
								</div>
								<div class="w2 text-center" style="display:inline-block;">
									<a title="调低优先级" class="down" onclick="down(this)"><i class="fa fa-arrow-down"></i></a>
								</div>
								<div class="w2 text-center" style="display:inline-block;">
									<a title="删除" data="{$vo.id}" class="del" onclick="del(this);"><i class="fa fa fa-times"></i></a>
								</div></span>
						</li>
					</foreach>
				</ul>
			</div>
			<div style="height:26px;"></div>
			<div class="table">
				<ul>
					<li class="thead">
						<span class="w20 x1">已完成事项 </span>
						<span class="w10 text-center">优先级</span>
						<span class="w10 ">截至日期</span>
						<span class="w10 text-center">状态</span>
						<span class="w10">操作</span>
					</li>
					<foreach name="list2" val="vo">
						<li class="tbody todo_bg{$vo.priority}" node="{$vo.id}">
							<input class="node" type="hidden" name="node[]" value="{$vo.id}">
							<input class="priority" type="hidden" name="priority[]" value="{$vo.priority}">
							<input class="sort" type="hidden" name="sort[]">

							<span class="w20 x1"> <a href="{:url('edit','id='.$vo['id'])}">{$vo.name}</a> </span>
							<span class="w10 text-center">{:status($vo['priority'],'todo')}</span>
							<span class="w10 ">{$vo.end_date}</span>
							<span class="w10 text-center"> <a class="status">{:todo_status($vo['status'])}</a> </span>
							<span class="w10">
								<div class="w2 text-center" style="display:inline-block;">
									<a title="调高优先级" class="up" onclick="up(this)"><i class="fa fa-arrow-up"></i></a>
								</div>
								<div class="w2 text-center" style="display:inline-block;">
									<a title="调低优先级" class="down" onclick="down(this)"><i class="fa fa-arrow-down"></i></a>
								</div>
								<div class="w2 text-center" style="display:inline-block;">
									<a title="删除" data="{$vo.id}" class="del" onclick="del(this);"><i class="fa fa fa-times"></i></a>
								</div></span>
						</li>
					</foreach>
				</ul>
			</div>
		</div>
	</form>
	<div id="dialog2" class="hidden">
		<ul class="">
			<li>
				<a onclick="mark_status(1);">尚未开始</a>
			</li>
			<li>
				<a onclick="mark_status(2);">正在进行</a>
			</li>
			<li>
				<a onclick="mark_status(3);">完成</a>
			</li>
		</ul>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use('global', function() {
			var $ = layui.jquery;
			var fn = {
				add : function() {
					window.open("{:url('add')}", "_self");
				},
				mark_status : function(val) {
					node = $("#dialog2").attr("node");
					if (node) {
						send_ajax("{:url('mark_status')}", "id=" + node + "&val=" + val, function(data) {
							location.reload(true);
						});
					}
				},
				up : function(obj) {
					var current = $(obj).parent().parent().parent();
					var prev = current.prev();
					if (current.index() > 1) {
						current.insertBefore(prev);
					}
					this.set_sort();
				},
				down : function(obj) {
					var current = $(obj).parent().parent().parent();
					var next = current.next();
					if (next) {
						current.insertAfter(next);
					}
					this.set_sort();
				},
				del : function(obj) {
					id = $(obj).attr('data');
					//信息框-例2
					layer.msg('确定要删除吗?', {
						time : 0,
						btn : ['确定', '取消'],
						yes : function(index) {
							var vars = "id=" + id;
							send_ajax("{:url('del')}", vars, function(ret) {
								if (ret.status) {
									layer.msg(ret.info, {
										time : 1200
									}, function() {
										location.reload(true);
									});
								}
							});
						},
						no : function(index) {
							layer.close(index);
						}
					});
				},
				set_sort : function() {
					$("li.tbody").each(function() {
						$(this).find("input.sort").val($(this).index());
					});
					var vars = $("#form_data").serialize();
					send_ajax("{:url('set_sort')}", vars);
				}
			};
			win_exp(fn);
			set_return_url(null);

			$("li a.status").on("click", (function() {
				$this = $(this);
				$("#dialog2").css("left", $this.parents("span").offset().left);
				$("#dialog2").css("top", $this.parents("span").offset().top + 2);
				$("#dialog2").removeClass('hidden');
				node = $this.parents("li").find("input.node").val();
				$("#dialog2").attr("node", node);
			}));
		});

	</script>
</block>